import { useEffect, useState } from 'react';
import {
  Video,
  HardDrive,
  Scissors,
  Volume2,
  Image,
  Zap,
  Filter,
  RotateCcw,
  Maximize,
  Upload,
  ArrowRight,
  BookOpen,
} from 'lucide-react';
import { useAppDispatch, useAppSelector } from '@/store';
import { setBreadcrumbs, showModal } from '@/store/slices/uiSlice';
import VideoToolCard from '@/components/common/VideoToolCard';
import FileUploader from '@/components/common/FileUploader';
import Button from '@/components/common/Button';

const VideoTools: React.FC = () => {
  const dispatch = useAppDispatch();
  const { activeTasks, recentFiles } = useAppSelector(state => state.video);
  const [, setSelectedTool] = useState<string | null>(null);

  useEffect(() => {
    dispatch(setBreadcrumbs([{ label: '仪表板', path: '/dashboard' }, { label: '视频工具' }]));
  }, [dispatch]);

  const tools = [
    {
      id: 'convert',
      title: '格式转换',
      description: '将视频转换为不同格式，支持MP4、AVI、MOV等主流格式',
      icon: Video,
      color: 'text-blue-600',
      bgColor: 'bg-blue-50',
      available: true,
      popular: true,
      features: ['多格式支持', '高质量转换', '批量处理'],
    },
    {
      id: 'compress',
      title: '视频压缩',
      description: '智能压缩视频文件，在保持画质的同时大幅减小文件大小',
      icon: HardDrive,
      color: 'text-green-600',
      bgColor: 'bg-green-50',
      available: true,
      popular: true,
      features: ['智能压缩', '质量保持', '空间节省'],
    },
    {
      id: 'trim',
      title: '视频剪辑',
      description: '精确剪切视频片段，支持时间轴编辑和多段剪辑',
      icon: Scissors,
      color: 'text-purple-600',
      bgColor: 'bg-purple-50',
      available: true,
      features: ['精确剪切', '多段编辑', '预览功能'],
    },
    {
      id: 'audio-extract',
      title: '音频提取',
      description: '从视频文件中提取高质量音频，支持多种音频格式输出',
      icon: Volume2,
      color: 'text-orange-600',
      bgColor: 'bg-orange-50',
      available: true,
      features: ['高质量提取', '多格式输出', '批量提取'],
    },
    {
      id: 'thumbnail',
      title: '缩略图生成',
      description: '自动生成视频缩略图和封面，支持自定义时间点截图',
      icon: Image,
      color: 'text-pink-600',
      bgColor: 'bg-pink-50',
      available: true,
      features: ['自动生成', '自定义截图', '多尺寸输出'],
    },
    {
      id: 'resize',
      title: '分辨率调整',
      description: '调整视频分辨率和比例，适配不同播放设备',
      icon: Maximize,
      color: 'text-indigo-600',
      bgColor: 'bg-indigo-50',
      available: true,
      features: ['智能缩放', '比例调整', '设备适配'],
    },
    {
      id: 'rotate',
      title: '视频旋转',
      description: '旋转和翻转视频，修正拍摄角度问题',
      icon: RotateCcw,
      color: 'text-cyan-600',
      bgColor: 'bg-cyan-50',
      available: true,
      features: ['角度调整', '翻转镜像', '快速处理'],
    },
    {
      id: 'filter',
      title: '滤镜特效',
      description: '为视频添加各种滤镜和特效，提升视频观感',
      icon: Filter,
      color: 'text-red-600',
      bgColor: 'bg-red-50',
      available: false,
      features: ['丰富滤镜', '实时预览', '参数调节'],
    },
    {
      id: 'enhance',
      title: '画质增强',
      description: '使用AI技术提升视频画质，去噪锐化优化',
      icon: Zap,
      color: 'text-yellow-600',
      bgColor: 'bg-yellow-50',
      available: false,
      features: ['AI增强', '去噪锐化', '智能优化'],
    },
  ];

  const handleToolClick = (toolId: string) => {
    setSelectedTool(toolId);
    dispatch(
      showModal({
        component: 'VideoToolModal',
        props: { toolId },
        backdrop: true,
        closable: true,
      })
    );
  };

  const handleUploadClick = () => {
    dispatch(
      showModal({
        id: 'file-upload-modal',
        component: 'FileUploadModal',
        backdrop: true,
        closable: true,
      })
    );
  };

  const popularTools = tools.filter(tool => tool.popular && tool.available);
  const allTools = tools;

  return (
    <div className='video-tools-page'>
      {/* Header */}
      <div className='page-header'>
        <div>
          <h1>视频处理工具</h1>
          <p>专业的视频处理工具集，满足您的各种视频编辑需求</p>
        </div>
        <div className='header-actions'>
          <Button variant='secondary' icon={<BookOpen size={18} />}>
            查看教程
          </Button>
          <Button variant='primary' icon={<Upload size={18} />} onClick={handleUploadClick}>
            上传视频
          </Button>
        </div>
      </div>

      {/* Quick Upload Area */}
      <div className='upload-section'>
        <h2>开始处理您的视频</h2>
        <p>拖拽视频文件到此处，或点击选择文件开始处理</p>
        <FileUploader
          maxFiles={5}
          onFilesSelected={files => {
            console.log('Selected files:', files);
          }}
        />
      </div>

      {/* Popular Tools */}
      {popularTools.length > 0 && (
        <div>
          <div className='section-title'>
            <h2>热门工具</h2>
            <span className='popular-badge'>最受欢迎</span>
          </div>
          <div className='tools-grid'>
            {popularTools.map(tool => (
              <VideoToolCard key={tool.id} {...tool} onClick={handleToolClick} />
            ))}
          </div>
        </div>
      )}

      {/* All Tools */}
      <div>
        <div className='section-title'>
          <h2>所有工具</h2>
        </div>
        <div className='tools-grid'>
          {allTools.map(tool => (
            <VideoToolCard key={tool.id} {...tool} onClick={handleToolClick} />
          ))}
        </div>
      </div>

      {/* Recent Activity */}
      <div className='activity-grid'>
        {/* Active Tasks */}
        <div className='activity-card'>
          <h2>当前任务</h2>
          {activeTasks.length > 0 ? (
            <div>
              {activeTasks.slice(0, 3).map(task => (
                <div key={task.id} className='task-item'>
                  <div className='task-status' />
                  <div className='task-details'>
                    <p className='task-name'>{task.inputFiles?.[0]?.name || '处理任务'}</p>
                    <p className='task-meta'>{task.type} • 进行中</p>
                  </div>
                  <div className='task-progress'>
                    {Math.round(task.progress?.percentage || 0)}%
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <div className='empty-state'>
              <Video />
              <p>暂无活跃任务</p>
              <p className='empty-subtitle'>开始处理视频后，任务将在此显示</p>
            </div>
          )}
        </div>

        {/* Recent Files */}
        <div className='activity-card'>
          <h2>最近文件</h2>
          {recentFiles.length > 0 ? (
            <div>
              {recentFiles.slice(0, 4).map(file => (
                <div key={file.id} className='file-item'>
                  <div className='file-icon'>
                    <Video />
                  </div>
                  <div className='file-details'>
                    <p className='file-name'>{file.name}</p>
                    <p className='file-meta'>
                      {file.format.toUpperCase()} • {Math.round(file.duration)}s
                    </p>
                  </div>
                </div>
              ))}
            </div>
          ) : (
            <div className='empty-state'>
              <Image />
              <p>暂无最近文件</p>
              <p className='empty-subtitle'>上传视频后，文件将在此显示</p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

import './styles.less';

export default VideoTools;
